<template>
  <van-popup
    v-model:show="visible"
    closeable
    close-on-popstate
    position="bottom"
    :close-on-click-overlay="false"
    :style="{ height: '80vh' }"
    @close="handleClose"
  >
    <div class="addr-box">
      <div class="addr-tit">选择地址</div>
      <br />
      <van-search v-model="value" placeholder="请输入搜索" show-action>
        <template #action>
          <a-button type="primary" @click="handleSearch">搜索</a-button>
        </template>
      </van-search>
      <div id="map-select" class="map-area"></div>
      <div :id="searchId" class="search-pannel"></div>
    </div>
  </van-popup>
</template>

<script lang="ts" setup>
  import { ref, withDefaults, defineProps, onMounted, nextTick } from 'vue';
  import { random } from 'lodash';
  import { initMapFile } from '@/utils/initMap';

  interface Props {
    id: string;
    billType: string;
    close: () => void;
    resolve: (x?: any) => void;
  }
  const props = withDefaults(defineProps<Props>(), {
    close: () => {
      return () => {};
    },
    resolve: () => {
      return () => {};
    },
  });

  let type = '';
  const loading = ref<boolean>(false);
  const visible = ref<boolean>(true);
  const value = ref('');

  let map: any = null;
  let initLoading = false;
  let placeSearch: any = null;
  const searchId = `search-${Date.now()}-${random(1000, 9999)}`;
  let selectObj = {};

  const handleSelect = (val) => {
    selectObj = {
      text: val.selected.data.name,
      lat: val.selected.data.location.lat,
      lng: val.selected.data.location.lng,
    };
    handleSuccess();
  };

  const initMap = () => {
    map = new window.AMap.Map('map-select', {
      resizeEnable: true,
      zoom: 17,
    });

    placeSearch = new window.AMap.PlaceSearch({
      map,
      panel: searchId,
      autoFitView: true,
    });

    placeSearch.on('selectChanged', handleSelect);
  };

  const initMapLoader = () => {
    return new Promise<void>((resolve, reject) => {
      if (initLoading) {
        resolve();
        return;
      }
      if (!window.AMap) {
        initLoading = true;
        initMapFile()
          .then((res) => {
            initLoading = false;
            window.AMap = res;
            initMap();
            resolve();
          })
          .catch((e) => {
            reject(e);
          });
      } else {
        if (!map) {
          initMap();
        }
        resolve();
      }
    });
  };

  const handleSearch = () => {
    if (placeSearch) {
      placeSearch.search(value.value);
    }
  };

  const handleOk = async () => {};

  onMounted(() => {
    nextTick(() => {
      initMapLoader();
    });
  });

  const handleSuccess = () => {
    type = 'reslove';
    visible.value = false;
  };

  const handleClose = () => {
    loading.value = false;
    if (type === 'reslove') {
      props.resolve(selectObj);
    } else {
      props.close();
    }
  };
</script>

<style lang="less">
  .addr-box {
    .addr-tit {
      padding-top: 30px;
      display: flex;
      justify-content: center;
      width: 100%;
      height: 80px;
      font-size: 14px;
    }

    .map-area {
      width: 100%;
      height: 0;
    }
  }
</style>
